<div id="tron-content-vote" fxLayout="column" class="ps" [perfectScrollbar]="{}">
    <h1>{{'Vote.Index.Title' | translate}}</h1>
    <p class="description">{{'Vote.Index.Description' | translate}}</p>

    <!-- Loading votes -->
    <ng-container *ngIf="isLoading">
        <mat-spinner class="loading-transaction" [diameter]="48" [strokeWidth]="2"></mat-spinner>
    </ng-container>

    <!-- is successful -->
    <ng-container *ngIf="!isLoading">
        <!-- Header -->
        <div id="vote-header">
            <div fxLayout="row" fxLayoutAlign="space-around center">
                <div class="vote-header-item">
                    <div class="label">{{'Vote.Index.TotalVotes' | translate}}</div>
                    <div class="value">{{totalVotes | formatCurrency:'':0}}</div>
                </div>

                <div class="vote-header-item">
                    <div class="label">{{'Vote.Index.TopRating' | translate}}</div>
                    <div class="value">{{topRating.name || 'NoName'}}</div>
                </div>

                <div class="vote-header-item">
                    <div class="label">{{'Vote.Index.AvailableVotes' | translate}}</div>
                    <div class="value">{{wallet.tronPower}}</div>
                </div>
            </div>
        </div>

        <div id="vote-content">
            <!-- Search vote -->
            <div class="search-filter">
                <mat-form-field floatLabel="never" class="filter-search">
                    <input matInput [placeholder]="'Vote.Index.SearchPlaceholder' | translate" (input)="getItems($event)">
                    <mat-icon matSuffix>search</mat-icon>
                </mat-form-field>
            </div>

            <div class="empty-search-section" *ngIf="!isEmptyList && !filteredVotes.length">
                {{ 'NoSearchResult' | translate }}
            </div>

            <!-- List votes -->
            <mat-list class="vote-items" *ngIf="!isEmptyList">
                <mat-list-item *ngFor="let item of filteredVotes" (click)="openDetail(item)">
                    <div mat-list-icon class="rank">
                        <span class="position">{{item.realTimeRanking}}</span>
                    </div>
                    <h4 mat-line>{{item.name || 'NoName'}}</h4>
                    <p mat-line [copy-to-clipboard]="item.address">{{item.address}} </p>
                    <p mat-line="" class="cycle-votes">{{item.lastCycleVotes|formatCurrency:'':0}}</p>
                </mat-list-item>
            </mat-list>
        </div>
    </ng-container>
</div>
